<html>

    <head>

        <style type='text/css'>
            body{
                color: gray;
            }

            .blue{
                color: blue;
            }
            #green{
                color: green;
            }
            div#eins > p {
                display:inline;

            }
            div{
                margin: 2em;
            }
            div.zwei > p {
                display:inline;
            }

            #drei > p >span{
                color:red;
            }
            p[class='dick']{
                font-weight: bold;
            }
            #vier p + p[class='dick']{
                text-decoration: underline;
            }
            .hans + p{
                text-decoration: underline;
            }
        </style>

    </head>

<body>
    Standardfarbe: grau

    <div id='eins'>
        (mit div#eins > p :display inline;)
        grau <p class='blue'>blau <span id='green'>gruen</span> blau</p>
    </div>
    <div class='zwei'>
        (mit div.zwei > p :display inline;)
        grau <p class='blue'>blau <span id='green'>gruen</span> blau</p>
    </div>
     <div>
        (ohne div > p :display inline;)
        grau <p class='blue'>blau <span id='green'>gruen</span> blau</p>
    </div>
    <div id='drei'>
        grau <p class='blue'>blau <span id='green'>rot</span> blau</p>
    </div>
    <div id='vier'>
        <p class='dick'>dick und fett</p>
        <p><p class='dick'>fett und underlined</p><span> hier nicht
mehr</span><p class='dick'> hier nur noch dick</p></p>
    </div>
    <div id='fuenf'>
        <p class='hans'>xx</p>
        <p>underlined</p>
        <p>hier nicht</p>
    </div>
</body>
</html>